<template>
	<view :class="['z-index', pageLoaded?'show':'']">
		<view
			v-for="(city,k) in items"
			:key="k"
			class="index">
			<view class="char">{{k}}</view>
			<view
				v-for="(v, i) in city"
				:key="i"
				class="item">
				{{v.name}}
			</view>
		</view>
		<view class="char-index">
			<view
				v-for="(v,i) in chars"
				:key="v"
				:class="['c', current===i?'active':'']"
				@tap="tapHandler(i)">
				<text class="text">{{v}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			'items':{type:Object}
		},
		mounted() {
			let chars = []
			for(let k in this.items){
				chars.push(k)
			}
			this.chars = chars
			this.$nextTick(()=>{
				// #ifdef MP-WEIXIN
				uni.createSelectorQuery().in(this).selectAll('.z-index .char').boundingClientRect(res => {
					this.mapTop = res.map(v=>v.top)
				}).exec()
				// #endif
				// #ifndef MP-WEIXIN
				uni.createSelectorQuery().selectAll('.z-index .char').boundingClientRect(res => {
					this.mapTop = res.map(v=>v.top)
				}).exec()
				// #endif
				this.pageLoaded = true
			})
		},
		data(){
			return{
				pageLoaded: false,
				current: -1,
				chars: [],
				mapTop: []
			}
		},
		methods:{
			tapHandler(i){
				this.current = i
				uni.pageScrollTo({
					scrollTop: this.mapTop[i],
					duration: 0
				})
			}
		}
	}
</script>

<style lang="scss">
	.z-index{
		opacity: 0;
		&.show{
			opacity: 1;
		}
		.char{
			background: #eee;
			padding: 10upx 20upx;
		}
		.item{
			padding: 20upx;
			border-top: solid 1upx #eee;
		}
		.char-index{
			position: fixed;
			right: 0;
			height: 100%;
			width: 2em;
			top: 0;
			display: flex;
			flex-direction: column;
			text-align: center;
			justify-content: center;
			.c{
				font-size: $font-size-sm;
				text-align: center;
				padding: 2upx;
			}
			.text{
				display: inline-block;
				width: 1.4em;
				height: 1.4em;
				line-height: 1.4em;
				border-radius: 50%;
			}
			.active{
				.text{
					background: $primary-color;
					color: #fff;
				}
			}
		}
	}
</style>
